<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>使用IntersectionObserver实现懒加载</title>
        <!-- 
        	@author：sm
        	@email：sm0210@qq.com
        	@desc：使用IntersectionObserver实现懒加载
        	ps：使用最新新版Chrome、Firefox测试，IE11及其以下暂不支持
         -->
        <style type="text/css">
        	* {
        		margin: 0;
        		padding: 0;
        	}
        	ul,li {
        		list-style: none;
        	}
        	.list {
        		width: 800px;
        		margin: 0 auto;
        	}
        	.list ul {
        		width: 100%;
        		overflow: hidden;
        	}
        	.list ul li {
        		float: left;
        		width: 185px;
        		height: 400px;
        		margin-bottom: 10px;
        		margin-left: 10px;
        		background-color: #ccc;
        		overflow: hidden;
        		text-align: center;
        		line-height: 400px;
        		color: red;
        		font-size: 24px;
        	}
        </style>
    </head>
    <body>
    	<!-- 
    		template：h5新标签，模板标签，不可见元素
    	 -->
    	<div class="list">
    		<ul>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    			<li class="lazy-loaded">
    				<template>
    					<img src="images/1.png" width="100%" height="100%" border="0"/>
    				</template>
    				<span class="loading">正在加载...</span>
    			</li>
    		</ul>
    	</div>
    	
    </body>
    <!--  -->
    <script type="text/javascript">
    	//获取dom
		function filterDom(selector) {
			//
			return Array.from(document.querySelectorAll(selector));
		}
		//事件观察者
		var observer = new IntersectionObserver(observerCall);
		//回调函数(可见性变化时的回调函数)
		//回调被调用何时被调用：
			//1.目标元素刚刚进入视口（开始可见）调用回调;
			//2.另一次是完全离开视口（开始不可见）调用回调;
		function observerCall(changes) {
			changes.forEach(function(change) {
				
				 if (change.intersectionRatio > 0) {
				 	console.log("a");
				 	
				 	var container = change.target;
					var content = container.querySelector('template').content;
					container.appendChild(content);
					setTimeout(function(){
						container.querySelector('.loading').style.display = 'none';
						observer.unobserve(container);
					}, 2000);
					
					//console.log(container.querySelector('template').content);
				 }
			});
		}
		//过滤元素
		filterDom('.lazy-loaded').forEach(function (item) {
			//开始观察
			observer.observe(item);
		});
    </script>
</html>